<template>
  <div style="padding: 10px;border: #F2F6FC 1px solid;">
    <el-form label-width="100px" v-if="fields.length" :rules="rules">
      <el-divider content-position="left">表单</el-divider>
      <div v-for="(v,i) in fields">
        <div v-if="notForm.indexOf(v.type)>-1">
          <el-divider v-if="v.type==='horizontal-line'">{{ v.name }}</el-divider>
          <h4 v-if="v.type==='headline'">{{ v.name }}</h4>
          <el-form-item v-if="v.type==='boolean'" label=" ">
            <el-checkbox v-model="v.value">{{ v.name }}</el-checkbox>
          </el-form-item>
        </div>
        <el-form-item :label="v.name" v-else :prop="v.id">
          <el-radio-group class="form-item" v-model="v.value" v-if="v.type==='radio-buttons'">
            <el-radio :label="3" v-for="(val,index) in v.options" :key="index">{{ val.name }}</el-radio>
          </el-radio-group>
          <el-date-picker value-format="yyyy-MM-dd" v-model="v.value" v-if="v.type==='date'" class="form-item"/>
          <el-time-picker value-format="HH:mm" v-model="v.value" v-if="v.type==='time'" class="form-item"/>
          <el-select v-model="v.value" placeholder="请选择" v-if="v.type==='dropdown'" class="form-item">
            <el-option
                v-for="item in v.options"
                :key="item.value?item.value:item.name"
                :label="item.name"
                :value="item.value?item.value:item.name">
            </el-option>
          </el-select>
          <el-input v-model="v.value" v-if="v.type==='text'" class="form-item"/>
          <el-input v-model="v.value" type="textarea" v-if="v.type==='multi-line-text'" class="form-item"/>
          <el-input-number v-model="v.value" :precision="0" :step="1" v-if="v.type==='integer'"
                           class="form-item"></el-input-number>
          <el-input-number v-model="v.value" :precision="2" :step="0.1" v-if="v.type==='decimal'"
                           class="form-item"></el-input-number>
          <el-upload class="form-item"
                     action="https://jsonplaceholder.typicode.com/posts/"
                     multiple
                     :limit="3" v-if="v.type==='upload'">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-select v-model="v.value" placeholder="请选择" v-if="v.type==='functional-group'" class="form-item">
            <el-option>
            </el-option>
          </el-select>
          <el-select v-model="v.value" placeholder="请选择" v-if="v.type==='people'"
                     filterable
                     remote
                     reserve-keyword
                     :remote-method="remoteMethod"
                     @change="peopleChange"
                     class="form-item">
            <el-option v-for="(v,i) in $store.state.people" :key="i"
                       :label="v.firstName"
                       :value="v">
            </el-option>
          </el-select>
          <el-input placeholder="请输入密码" v-if="v.type==='password'" show-password></el-input>
        </el-form-item>
      </div>
    </el-form>
    <el-divider content-position="left">意见</el-divider>
    <el-input style="margin: 10px 0"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="message">
    </el-input>
    <el-row type="flex" justify="end" v-if="processDefinitionId || taskId">
      <el-button type="primary" icon="el-icon-share" @click="submitStart" v-if="isStart">提交启动</el-button>
      <el-button-group v-else>
        <el-button type="success" icon="el-icon-share" @click="submit">通过</el-button>
        <el-button  icon="el-icon-delete" @click="endProcess">驳回</el-button>
      </el-button-group>
    </el-row>
    <el-dialog title="配置角色" :close-on-click-modal="false" :visible.sync="dialogShowC" width="500px">


    </el-dialog>
  </div>
</template>

<script>
import service from "@/api/service";

export default {
  name: "formModelV",
  props: {
    fields: {
      type: Array,
      default: () => []
    },
    processDefinitionId: '',
    processInstanceId: '',
    taskId: '',
    isStart: false,
    dialogShowC: false,
  },
  data() {
    return {
      notForm: ['headline', 'horizontal-line', 'spacer', 'boolean'],
      message: ''
    }
  },
  methods: {
    submit() {
      let properties = {}
      let candidate = []
      this.fields.forEach(v => {
        if (v.value) {
          if (v.type === 'people') {
            candidate.push(v.value.id)
            properties[v.id] = v.value.firstName
          } else {
            properties[v.id] = v.value
          }

        }
      })
      service.post('/small-service-flowable/form/submit', {
        taskId: this.taskId,
        processInstanceId: this.processInstanceId,
        message: this.message,
        properties: properties,
        candidate: candidate
      }).then(res => {
        if (res.status === 200) {
          this.$message.success(res.message)
          this.$emit('refresh')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    submitStart() {
      let properties = {}
      let candidate = []
      this.fields.forEach(v => {
        if (v.value) {
          if (v.type === 'people') {
            candidate.push(v.value.id)
            properties[v.id] = v.value.firstName
          } else {
            properties[v.id] = v.value
          }

        }
      })
      service.post('/small-service-flowable/form/submitStartFormData', {
        processDefinitionId: this.processDefinitionId,
        properties: properties,
        businessKey: 'businessKey', //订单ID
        candidate: candidate
      }).then(res => {
        if (res.status === 200) {
          this.$message.success(res.message)
          this.$emit('refresh')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    endProcess() {
      service.put('/small-service-flowable/task/endProcess', {
        processInstanceId: this.processInstanceId,
        deleteReason: 'deleteReason'
      }).then(res => {
        if (res.status === 200) {
          this.$message.success(res.message)
          this.$emit('refresh')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //候选人
    remoteMethod(v) {
      service.get('/small-service-flowable/app/rest/editor-users', {
        filter: v
      }).then(res => {
        this.$store.state.people = res.data
      })
    },
  },
  computed: {
    rules() {
      let arr = {}
      this.fields.forEach(v => {
        let label = v.id
        v.value = v.placeholder
        arr[label] = {required: v.required, trigger: 'blur', message: '不能为空'}
      })
      console.log(arr)
      return arr;
    }
  }

}
</script>

<style scoped>
.form-item {
  width: 100% !important;
}
</style>